<!-- 头部

    单标签 <br>
    双标签 开始 /结束 <html></html>
    包含关系->(父子关系)、并列关系 
    html
    title 标题
    head  头部
    body  网页主体

-->
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 语言 提示浏览器翻译-->

<head>
    <meta charset="UTF-8">
    <!-- 万国码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/iconfonts/iconfonts.css">
    <link rel="stylesheet" href="learnCSS.css">
    <title> 莫娜</title>
</head>

<body>

    <!-- 主标题 -->
    <header>
        <h1>莫娜</h1>
        <nav class="daohanglan">
            <select name="" id="">
                <option>莫娜</option>
                <option selected="selected">其他角色</option>
                <option value="">武器</option>
            </select>
            <select name="" id="">
                <option>天空之卷</option>
                <option selected="selected">其他武器</option>
                <option value="">武器</option>
            </select>
            <input class="search" type="text" value="莫娜">
            <button>搜索</button>
        </nav>
        <nav>
            <div class="topnav">
                <a href="#">莫娜</a>
                <a href="#">角色介绍</a>
                <a href="#">背景故事</a>
                <a href="#">关于作者</a>
            </div>
        </nav>
    </header>
    <!-- 导航栏 -->

    <!-- 广告 -->
    <!-- <div class="banner">

    </div> -->
    <!-- 主体 -->

    <nav>
        <div id="app">
            <div class="nav">
                <a href="" v-for="item in list">
                    {{item}}
                </a>
            </div>
            <div class="goto-top" @click="backTop">

            </div>
        </div>
    </nav>


    <main>
        <div class="body">
            <div class="main">
                <table class="table">
                    <thead>
                        <tr>
                            <td colspan="3" align="center">莫娜</td>
                            <!-- 多余的单元格删了 -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td rowspan="4" width="100px" height="140px">
                                <a target="_blank"
                                    href="https://bbs.mihoyo.com/ys/obc/content/1057/detail?bbs_presentation_style=no_header">
                                    <img src="/img/mora.jpg" alt="屏幕朗读器用的" class="MyWife">
                                </a>
                            </td>
                            <td class="twotd">所属</td>
                            <td>蒙德城</td>
                        </tr>
                        <tr>
                            <td class="twotd">神之眼</td>
                            <td>水</td>
                        </tr>
                        <tr>
                            <td class="twotd">武器类型</td>
                            <td>法器</td>
                        </tr>
                        <tr>
                            <td class="twotd">命之座</td>
                            <td>映天座</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="font-small">
                                <strong>角色介绍：</strong>
                                <p class="introduction">提瓦特大陆上众生奔忙，行商运货，骑士巡街，农人耕作。</p>
                                <p class="introduction">但如果问莫娜——神秘高傲的占星术士——</p>
                                <p class="introduction">在忙些什么的话，答案大概会是，忙着计算一笔名为「生活」的账。</p>
                                <p class="introduction">尽管她本人一定会否认「穷」这个说法，作出如下辩解；</p>
                                <p class="introduction">
                                    「太过漂亮的景象会把最简朴的真实藏起来。太过美味的食物会让人忘记这东西有多少营养。简朴的生活是为了看破世界的真实。」</p>
                                <p class="introduction">清贫的生活只是通往真实的修行…这是莫娜本人一直坚持的说辞。</p>
                                <p class="introduction">提瓦特大陆上众生奔忙，连神秘的占星术士也不例外。</p>
                                <p class="introduction">——哦，不过吟游诗人好像真的什么都不做。</p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="BGstory ">
                                <strong>背景故事:</strong>
                                <p>
                                    我的名字是阿斯托洛吉斯·莫娜·梅姬斯图斯， 意为伟大的占星术士莫娜，如果想要找我占卜， 记住我的名字是最基本的尊重，而且要一次性全念对。
                                </p>
                                <p>
                                    占星术士的工作是向人们明确的展示他们即将面对的命运，我也是这么做的，不过...总有些人不愿意接受。
                                </p>
                                <p>
                                    限制物欲，是占星术士修行的一部分，只有简朴的生活才能窥探到世界的真实。
                                </p>

                                <p>「『阿斯托洛吉斯·莫娜·梅姬斯图斯』老师的文章真是太有趣了！虽然基本看不懂，但特别有意思。」
                                    —《蒸汽鸟报》的忠实读者紫薇满怀敬意地说道</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>



            <div class="cvbox">
                <h3 class="cvboxh3">CV介绍</h3>
                <button><a href="#">CV试听</a></button>
                <ul>
                    <li><a href="#">中：陈婷婷</a></li>
                    <li><a href="#">日：小原好美</a></li>
                    <li><a href="#">英：费丽茜娅·安吉尔</a></li>
                    <li><a href="#">韩：禹贞信</a></li>
                    <li><a href="https://bbs.mihoyo.com/ys/obc/content/1620/detail?bbs_presentation_style=no_header"
                            target="_blank">
                            >>全语音试听&文字版请点我<< </a>
                    </li>
                </ul>
            </div>
            <h3 class="skill">
                老太婆来抓我啊！
            </h3>

            <!-- <div style="clear:both"> </div> -->
        </div>




        <div class="boxs">
            <div class="box">
                <div class="img">
                    <a href="#"><img src="/img/0.jpg" alt=""></a>
                </div>
                <p class="review">
                    okkkkkkkkkkkkk
                </p>
                <div class="appraise">
                    评价
                </div>
                <div class="info">
                    <h4><a href="#">~~~~~~~~~~~~~~~~~~</a></h4>
                    <strong> | </strong>
                    <span> ￥ 999</span>
                </div>
            </div>
            <div class="box">
                <div class="img">
                    <a href="#"><img src="/img/0.jpg" alt=""></a>
                </div>
                <p class="review">
                    okkkkkkkkkkkkk
                </p>
                <div class="appraise">
                    评价
                </div>
                <div class="info">
                    <h4><a href="#">~~~~~~~~~~~~~~~~~~</a></h4>
                    <strong> | </strong>
                    <span> ￥ 999</span>
                </div>
            </div>
            <div class="box">
                <div class="img">
                    <a href="#"><img src="/img/0.jpg" alt=""></a>
                </div>
                <p class="review">
                    okkkkkkkkkkkkk
                </p>
                <div class="appraise">
                    评价
                </div>
                <div class="info">
                    <h4><a href="#">~~~~~~~~~~~~~~~~~~</a></h4>
                    <strong> | </strong>
                    <span> ￥ 999</span>
                </div>
            </div>
            <div class="box last">
                <div class="img">
                    <a href="#"><img src="/img/0.jpg" alt=""></a>
                </div>
                <p class="review">
                    okkkkkkkkkkkkk
                </p>
                <div class="appraise">
                    评价
                </div>
                <div class="info">
                    <h4><a href="#">~~~~~~~~~~~~~~~~~~</a></h4>
                    <strong> | </strong>
                    <span> ￥ 999</span>
                </div>
            </div>
        </div>


        <div class="positiontest">
            <img src="/img/xiao.jpg" alt="">
            <div class="left"> &lt; </div>
            <div class="right"> &gt; </div>
            <div class="dot">
                <ul>
                    <li class="selected"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>



        <!-- <div class="jd">
            <span></span>
            <p>省略略略略略略略略略略略略略略略</p>
        </div>

        <div class="p">
            省略略略略略略略略略略略略略略略,不知道怎么说就是不会显示点点点
        </div>

        <div class="duop">
            省略略略略略略略略略略略略略略略,不知道怎么说就是不会显示点点点
        </div> -->

        <div class="border_margin clearfix">
            <ul>
                <li>
                    <img src="/img/skill1.png" alt="">
                    这是一个技能描述，但是我现在不想去描述它，这是为了演示文字环绕浮动图片演示的
                    <div class="clear"></div>
                    <div class="price">
                        <span class="miaosha">￥0.01
                            <div class="miaoshatriangle"></div>
                        </span>
                        <span class="del">￥5650</span>
                    </div>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>



        <div class="trans">
            <div class="transin">

            </div>
        </div>

        <div class="logo">
            <img src="/img/transition.png" alt="" class="logoson">
        </div>
        <div class="heart">

        </div>
        <!-- <video src="/src/《原神》宣传视频-愿前路无止境.317640458.mp4" autoplay muted="muted" controls>

        </video> -->

        <div class="footer_a">
            <a href="#" class="prev"> &lt;&lt; 上一页 </a>
            <a href="#" class="cur">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#" class="elp">...</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#" class="next"> &gt;&gt; 下一页 </a>
            到第<input type="text" value="">页
            <input type="button" value="确定">
        </div>



        <hr>

    </main>



    <!-- 统一页脚 -->
    <footer>
        <dl>
            <dt class="ZoZo">ZoZo</dt>
            <dl>
                <a href="https://gitee.com/zozo042233" target="_blank">
                    <span class="iconfont icon-icon_github-circle"></span>
                    关于作者
            </dl></a>
            <dl><del>穷鬼占卜师</del></dl>
            <dl><a href="https://bbs.mihoyo.com/ys/obc/content/1057/detail?bbs_presentation_style=no_header"
                    title="莫娜wiki" target="_blank"> wiki 链接 Мона  </a></dl>
            <dl><a href="img/mora.jpg">下载图片</a></dl>
        </dl>

    </footer>



    <!-- 标签
        列表嵌套 可以分级
         ul 无序列表 Unordered List
         ol 有序列表 
            li List Item
         dd 描述列表 
            dt 描述术语 description terms
            dd 描述部分 description description
        href 这个名字可能开始看起来有点令人费解，代表超文本引用（ hypertext reference）。
        a 链接  ->属性 title 标题 target 目标窗口弹出方式
                在下载链接时使用 download 属性
        br 换行标签
        p 段落 为一个段落
        文本格式化
            em 斜体     i
            del 删除线  
            ins 下划线  u
            strong 加大 b 
        
        div span 标签
            没有语义 就是一个盒子 装内容 布局用
                弹性盒子伏笔
            · div 分割分区 占一行 大盒子
            · span 同一行跨距 跨行 小盒子
    -->
    <!-- 属性
        属性
        单引号 双引号？
            如果用了双引号 那么里面用单引号 ，没有特殊区别 
        图形标签属性
            img 
                src source 图片源
                alt 无障碍访问
                title 鼠标放在图片上显示
                width 
                height
                border 边框
            路径 同一路径 
                 下一级路径 /
                 上一级路径 ../
                 绝对路径 一般用于网络链接 


     -->
    <!-- script -->
    <!-- js文件最好放在最后面渲染 避免渲染出错，还无法显示网页 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./learnVue.js"></script>
</body>


</html>